<template>
    <div class="parmsMain">
        <div>
            <el-button style="margin-left: 20px;" @click="addParam" size="small" icon="el-icon-plus">添加</el-button>
            <el-button style="margin-left: 20px;" @click="deleteParam" size="small" type="danger"  icon="el-icon-delete">删除</el-button>
        </div>
        <div class="paramsGridArea">
            <el-table
                    ref="paramsTableRef"
                    :data="paramsData"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="规格参数名称"
                        prop="name">
                    <template slot-scope="scope">
                        <el-form :model="scope.row" :key="scope.row.index" ref="nameForm">
                            <el-form-item label-width="20px" prop="name" label="">
                                <el-input v-model="scope.row.name"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="规格参数值"
                        prop="value">
                    <template slot-scope="scope">
                        <el-form :model="scope.row" :key="scope.row.index" ref="priceForm">
                            <el-form-item label-width="20px" prop="price" label="">
                                <el-input v-model="scope.row.value"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
    /* eslint-disable */
    import {Component, Vue, Prop, Watch} from 'vue-property-decorator'
    const goodStore=namespace("goods");
    import {namespace} from 'vuex-class'
    @Component({
        components:{
        }
    })
    export default class SkuInfo extends Vue {
        [x: string]: any;
        @Prop() params;
        @goodStore.State skuIndex;
        public tableData:any=new Array<any>();
        public paramsData:any=new Array<any>();
        created(){
            if(this.params){
                let skuParams= this.params.spuDataItem&&this.params.spuDataItem.skus.forEach(item=>{
                    this.tableData.push(...item.params);
                });
            }
        }
        public addParam(){
            this.tableData.push({
                name:"",
                value:"",
                skuId:this.skuIndex
            });
            this.paramsData=this.tableData.filter(item=>item.skuId==this.skuIndex);
        }
        @Watch("skuIndex")
        public skuIndexChange(newVal, oldVal){
            this.paramsData=this.tableData.filter(item=>item.skuId==newVal);
        }

        public deleteParam(){
            this.paramsData.forEach((item,index)=>{
                item.deleteIndex=index+1;
            });
            let curSkuData=new Array();
            let selectData=this.getTableData();
            this.paramsData.forEach((item)=>{
                let data=selectData.find(curItem=>curItem.deleteIndex==item.deleteIndex);
                if(!data){
                    curSkuData.push(item);
                }
            });
            this.paramsData=curSkuData;
        }
        public getTableData(){
            let paramsTable:any=this.$refs.paramsTableRef;
            let selectData:Array<any>=paramsTable.selection;
            return selectData;
        }

    }
</script>
<style lang="less">
    .parmsMain{
        background-color: white;
        height: 100%;
        display: flex;
        flex-direction: column;
        .paramsGridArea{
            width: 100%;
            min-height: 360px;
            max-height: 360px;
            .el-table__body-wrapper {
                overflow-y: auto;
                position: relative;
                height: 300px;
            }
            .el-table--fit{
                overflow-y: auto;
                height:100%;
            }
        }
    }
</style>